<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI电商智能客服系统架构图</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .container {
            width: 90%;
            max-width: 1000px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 40px;
        }
        .architecture {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .layer {
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            font-weight: bold;
            color: white;
            transition: transform 0.3s;
        }
        .layer:hover {
            transform: scale(1.02);
        }
        .ui-layer {
            background-color: #4CAF50;
            box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
        }
        .system-layer {
            background-color: #2196F3;
            box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
        }
        .processor-layer {
            background-color: #9C27B0;
            box-shadow: 0 4px 8px rgba(156, 39, 176, 0.3);
        }
        .bottom-layers {
            display: flex;
            gap: 15px;
        }
        .bottom-layers > div {
            flex: 1;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            color: white;
            transition: transform 0.3s;
        }
        .bottom-layers > div:hover {
            transform: scale(1.02);
        }
        .llm-layer {
            background-color: #FF5722;
            box-shadow: 0 4px 8px rgba(255, 87, 34, 0.3);
        }
        .embedding-layer {
            background-color: #FF9800;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
        }
        .description {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-top: 5px;
            color: #333;
            font-weight: normal;
            text-align: left;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .components {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .component {
            background-color: rgba(255,255,255,0.2);
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI电商智能客服系统架构图</h1>
        
        <div class="architecture">
            <!-- UI层 -->
            <div class="layer ui-layer">
                UI层
                <div class="components">
                    <span class="component">Chainlit界面</span>
                    <span class="component">交互式问答</span>
                    <span class="component">流式响应</span>
                </div>
                <div class="description">
                    提供用户友好的聊天界面，基于Chainlit框架实现。允许用户提问并实时展示AI回复，支持流式输出，增强用户体验。
                </div>
            </div>
            
            <!-- 系统层 -->
            <div class="layer system-layer">
                系统层
                <div class="components">
                    <span class="component">CustomerServiceSystem</span>
                    <span class="component">系统API</span>
                    <span class="component">异常处理</span>
                </div>
                <div class="description">
                    系统的核心组件，提供统一的API接口，负责协调各个子系统的工作。包含向量数据库创建、查询引擎构建和异常处理机制，确保系统稳定运行。
                </div>
            </div>
            
            <!-- 主处理器层 -->
            <div class="layer processor-layer">
                主处理器层
                <div class="components">
                    <span class="component">MainHandler</span>
                    <span class="component">路由查询引擎</span>
                    <span class="component">向量查询引擎</span>
                </div>
                <div class="description">
                    实现核心业务逻辑，包括知识库索引构建、查询处理和结果生成。通过路由机制将用户问题导向合适的知识模块，提高回答的准确性和相关性。
                </div>
            </div>
            
            <!-- LLM层和Embedding层 -->
            <div class="bottom-layers">
                <div class="llm-layer">
                    LLM层
                    <div class="components">
                        <span class="component">Local HuggingFace</span>
                        <span class="component">OpenRouter</span>
                        <span class="component">OpenAI兼容接口</span>
                    </div>
                    <div class="description">
                        提供自然语言处理能力，支持多种大型语言模型，包括本地模型和云端API。负责理解用户问题并生成自然、准确的回答。
                    </div>
                </div>
                
                <div class="embedding-layer">
                    Embedding层
                    <div class="components">
                        <span class="component">向量嵌入</span>
                        <span class="component">文本索引</span>
                        <span class="component">语义检索</span>
                    </div>
                    <div class="description">
                        将文本转换为向量表示，支持语义检索和相似度计算。通过向量化知识库内容，实现对用户问题的精准匹配和相关文档的检索。
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 